<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动影响</title>

    <style>
        .outer1 {
            width: 400px;
            background-color: aqua;
            border: 1px solid black;
        }

        .inner {
            width: 50px;
            height: 50px;
            background-color: rgb(50, 17, 237);
            /* 第一个影响 对于父亲元素 如果没有指定对应的宽高 那么一定会因为无法撑开 导致对应の父亲元素无法正常显示 */
        }

        .inner1,.inner2, .inner3,.inner4,.inner5 {
            float: left;
        }

        /* 解决浮动带来的两个影响的最佳解决方案 */


        /* 最终解决方案 在父类元素后加一个后缀 从而 */
        .outer1::after {
            content: '';
            display: block;
            clear: both;
        }

    
    </style>
</head>
<body>
    <div class="outer1">
        <div class="inner inner1">方块1</div>
        <div class="inner inner2">方块2</div>
        <div class="inner inner3">方块3</div>
        <!-- 对于同类的影响 浮动的元素的字体展示的位置可能改变 -->
        <div class="inner inner4">方块4</div>
        <div class="inner inner5">方块5</div>
    </div>

    <div style="background-color: bisque;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, quasi alias ab nam facere accusantium ad nulla itaque voluptatibus dolores quas consectetur repudiandae recusandae nobis doloremque amet aspernatur eveniet nesciunt ex aliquam sapiente magnam cupiditate. Dignissimos harum dolorum ipsam repellendus dolore! Harum eveniet provident, enim voluptatibus ea laudantium quisquam numquam vitae eius earum sit dolores quos eos veritatis facere, doloremque iste modi labore quam animi quas blanditiis. Praesentium, aliquam ipsam. Totam, sequi fugit laudantium esse vero ratione fuga pariatur rem, consequuntur ipsa neque aliquid. Laudantium eos cumque fuga iusto, quas dolorum necessitatibus labore, numquam dignissimos natus placeat omnis beatae cum.</div>
</body>
</html>